<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>格式化展示后端参数</title>
    <style>
      pre {
        background-color: #f4f4f4;
        padding: 10px;
        border-radius: 5px;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: Consolas, monospace;
      }
    </style>
  </head>
  <body>
    <h2>后端参数格式化展示</h2>
    <button id="loadDataBtn">加载数据</button>
    <pre id="output">点击“加载数据”按钮获取并展示数据</pre>

    <script>
      document.getElementById('loadDataBtn').addEventListener('click', () => {
        // 模拟后端返回的数据
        const backendData = {
          name: '张三',
          age: 28,
          email: 'zhangsan@example.com',
          address: {
            city: '北京',
            street: '朝阳区'
          }
        }

        // 格式化JSON字符串，缩进2个空格
        const formatted = JSON.stringify(backendData, null, 2)

        // 展示在页面上
        document.getElementById('output').textContent = formatted
      })
    </script>
  </body>
</html>
